<form [formGroup]="form" (ngSubmit)="register()" role="form" class="flex flex-col justify-start items-stretch">
  <mat-tab-group mat-align-tabs="start" mat-stretch-tabs="false" disableRipple>
    <mat-tab [label]="'Auth.Signup' | translate: {Default: 'Signup'}">
      <div class="flex flex-col justify-start items-stretch p-2 mt-2 gap-2">
        <ng-container *ngIf="showMessages.error && errors?.length && !loading">
          <mtx-alert *ngFor="let error of errors; let i = index" type="warning" dismissible (closed)="errors.splice(i, 1)">
            {{ 'Auth.' + error | translate: {Default: error} }}
          </mtx-alert>
        </ng-container>

        <mtx-alert *ngFor="let message of messages; let i = index" type="success" dismissible (closed)="messages.splice(i, 1)">
          {{ message }}
        </mtx-alert>
      
        <div>
          <label for="email" class="block mb-2 text-base font-medium text-gray-900 dark:text-white">
            {{ 'AUTH.REGISTER.EMAIL' | translate: {Default: 'Email'} }}
          </label>
          <input matInput type="email" name="email" id="email" formControlName="email"
            class="ngm-input-element"
            [placeholder]="'AUTH.REGISTER.EMAIL' | translate: {Default: 'Email'} "
          >
        </div>

        <div>
          <label for="password" class="block mb-2 text-base font-medium text-gray-900 dark:text-white">
            {{ 'AUTH.REGISTER.PASSWORD' | translate: {Default: 'Password'} }}
          </label>
          <input matInput type="password" name="password" id="password" formControlName="password"
            class="ngm-input-element"
            placeholder="••••••••"
          >
          <div class="my-2">
            <mat-progress-bar mode="determinate" [value]="passwordProgressMap[status]?.progress ?? 0" [color]="passwordProgressMap[status]?.color ?? 'warn'"></mat-progress-bar>
          </div>
        </div>

        <div>
          <label for="confirm_password" class="block mb-2 text-base font-medium text-gray-900 dark:text-white">
            {{ 'AUTH.REGISTER.CONFIRM_PASSWORD' | translate: {Default: 'Confirm Password'} }}
          </label>
          <input matInput type="password" name="confirm_password" id="confirm_password" formControlName="confirm"
            class="ngm-input-element"
            placeholder="••••••••"
          >

          @if (mismatch) {
            <mat-error class="text-red-500"><span>{{ 'Auth.Mismatch' | translate: {Default: 'Mismatch'} }}</span></mat-error>
          }
        </div>
      
        <div class="flex justify-between items-center p-1">
          <button class="ngm-button group relative inline-flex items-center justify-center cursor-pointer p-0.5 mb-2 overflow-hidden text-sm font-medium text-gray-900 rounded-lg
            bg-gradient-to-br from-green-400 to-blue-600 dark:text-white focus:ring-4 focus:outline-none focus:ring-green-200 dark:focus:ring-green-800"
            [class.ngm-button-disabled]="form.invalid || loading || submitted"
            [disabled]="form.invalid || loading || submitted">
            <span class="relative w-full px-5 py-2.5 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0">
              {{ 'AUTH.REGISTER.SUBMIT' | translate: {Default: 'Submit'} }}
            </span>
          </button>

          <a class="login" routerLink="/auth/login">{{ 'AUTH.REGISTER.SIGN-IN' | translate: {Default: 'Sign-in'} }}</a>
        </div>
      </div>
    </mat-tab>
  </mat-tab-group>

</form>
